<template>
  <div class="permissions">
    <h2>用户权限管理</h2>
    <el-table :data="users" border style="width: 100%">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="permission" label="权限">
        <template slot-scope="scope">
          <el-select v-model="scope.row.permission" placeholder="选择权限">
            <el-option label="管理员" value="admin"></el-option>
            <el-option label="普通用户" value="user"></el-option>
            <el-option label="访客" value="guest"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="deleteUser(scope.$index)">删除</el-button>
          <el-button type="primary" @click="updateUserPermission(scope.row)">更新权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="add-user">
      <el-input v-model="newUserName" placeholder="输入名称" style="width: 200px"></el-input>
      <el-select v-model="newUserPermission" placeholder="选择权限" style="width: 200px">
        <el-option label="管理员" value="admin"></el-option>
        <el-option label="普通用户" value="user"></el-option>
        <el-option label="访客" value="guest"></el-option>
      </el-select>
      <el-button type="primary" @click="addUser">添加用户</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '用户1', permission: 'admin' },
        { id: 2, name: '用户2', permission: 'user' },
        { id: 3, name: '用户3', permission: 'guest' }
      ],
      newUserName: '',
      newUserPermission: 'user'
    };
  },
  methods: {
    addUser() {
      const newUser = {
        id: Math.floor(Math.random() * 1000), // Generate a random ID for demo purposes
        name: this.newUserName,
        permission: this.newUserPermission
      };
      this.users.push(newUser);
      this.newUserName = ''; // Clear the input field
    },
    deleteUser(index) {
      this.users.splice(index, 1);
    },
    updateUserPermission(user) {
      console.log(`Updating permission for user ${user.name} to ${user.permission}`);
      this.$message.success('用户信息已更新');
    }
  }
};
</script>

<style scoped>
.permissions {
  margin: 20px;
}

.add-user {
  margin-top: 20px;
}
</style>
